import { Outlet, useLocation, useNavigate } from "react-router";
import { Menu } from 'antd'
import type { MenuItemType } from 'antd/es/menu/interface'
import { PictureOutlined, HomeOutlined, UploadOutlined, SmileOutlined } from '@ant-design/icons'
import './default.scss'

export default function DefaultLayout () {
  const navigate = useNavigate()
  const location = useLocation()
  const menuItems: MenuItemType[] = [
    { key: '/', label: '首页', icon: <HomeOutlined /> },
    { key: '/upload', label: '上传', icon: <UploadOutlined /> },
    { key: '/emoji', label: '表情包', icon: <SmileOutlined /> },
    { key: '/album', label: '相册', icon: <PictureOutlined /> },
  ]

  function clickMenuItem ({ key }: { key: string }) {
    navigate(key)
  }

  return (
    <div className="default-layout">
      <Menu className="default-layout-menu" items={menuItems} selectedKeys={[location.pathname]} onClick={clickMenuItem} />
      <div className="default-layout-container">
        <Outlet />
      </div>
    </div>
  )
}